import React, { useState } from "react";
import "./App.css";
import SupplierTable from "./SupplierTable";
import Calculator from "./Calculator";
import EpdCalculator from "./EpdCalculator";
import Routes from "./Routes";

function App() {
  const [activePage, setActivePage] = useState("supplier"); // 'supplier' or 'calculator'

  const handlePageChange = (page) => {
    setActivePage(page);
  };

  return (
    <div className="App">
      <h1>Green Supplier Selection Tool</h1>

      <nav>
        <ul>
          <li
            className={activePage === "supplier" ? "active" : ""}
            onClick={() => handlePageChange("supplier")}
          >
            Supplier Selection
          </li>
          <li
            className={activePage === "calculator" ? "active" : ""}
            onClick={() => handlePageChange("calculator")}
          >
            ECF Calculator
          </li>{" "}
          {/* Changed tab name */}
          <li
            className={activePage === "epd" ? "active" : ""}
            onClick={() => handlePageChange("epd")}
          >
            EPD Calculator
          </li>{" "}
          {/* Added new tab */}
          <li
            className={activePage === "routes" ? "active" : ""}
            onClick={() => handlePageChange("routes")}
          >
            Routes
          </li>{" "}
          {/* Add Routes link */}
        </ul>
      </nav>

      <hr />

      {activePage === "supplier" && <SupplierTable />}
      {activePage === "calculator" && <Calculator />}
      {activePage === "epd" && <EpdCalculator />}
      {activePage === "routes" && <Routes />}
    </div>
  );
}

export default App;
